<template>
  <div class="section-two" style="margin-top:0">
    <!-- <div class="border-row"></div>
    <div class="border-col"></div> -->
    
    <div class="section-header-two">求职者户籍归属</div>
    <div id="charts" ref="charts" :style="chartsDom" v-show="jz"></div>
    <animae-jz :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { get_TalentMonitor_talentCenus } from '@/api/data'
export default {
  data() {
    return {
      chartData: [],
      jz:true,
      satas:null,
    }
  },
  props: ['height','dateProp'],
  computed: {
    chartsDom() {
      return {
        width: (document.documentElement.clientWidth-30)/4-15 - 10 + 'px',
        height: this.height - 30 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
    },
    xAxisData() {
      let data = this.chartData.map(v=>{
        if(v.name.includes('-')){
          let itemArr = v.name.split('-');
          return `${itemArr[0]/1000}k-${itemArr[1]/1000}k`
        }else if(v.name.includes('以上')){
          return v.name.split('').reverse().slice(2).reverse().join('')/1000 + 'k以上';
        }else{
          return v.name;
        }
      });
      return data;
    }
  },
  mounted() {
    this.$nextTick(_=>{
      this.init();
    });
  },
  watch: {
    satas(newSta,oldSta) {
      if(newSta!=null){
        this.init()
      }
    },
    immediate: true
  },
  methods: {
    init() {
      this.jz=false
      get_TalentMonitor_talentCenus(this.dateProp)
      .then(({data:{data}})=>{
                  this.jz=true
        if(data.array.length){
          let arr=data.array
          if(this.$store.state.sarlary!=null){
            // arr.unshift({name:'温江以外',value:this.$store.state.sarlary-data.total})
          this.chartData = arr;
          this.chartsInit();
          }else{
            setTimeout(()=>{
              if(this.$store.state.sarlary!=null){
                console.log(this.$store.state.sarlary)
                // arr.unshift({name:'温江以外',value:this.$store.state.sarlary-data.total})
                this.chartData = arr;
               this.chartsInit();
              }
            },1500)
          }
        }else{
          this.chartData = null;
        }
      });
    },
    chartsInit() {
      let option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '40',
              bottom: '0',
              top: '15',
              containLabel: true
          },
          xAxis: {
              type: 'value',
              show: false
          },
          yAxis: {
              type: 'category',
              data: this.xAxisData,
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                color: 'rgba(255, 255, 255, 1)'
              }
          },
          series: [
              {
                  name: '人数',
                  type: 'bar',
                  data: this.chartData.map(v=>v.value),
                  label: {
                    show: true,
                    position: 'right',
                    color: 'rgba(255, 255, 255, 1)',
                    formatter: params => {
                      return `${params.value}人`
                    }
                  },
                  barWidth: 15,
                  itemStyle: {
                    barBorderRadius: 15,
                    color: new this.$echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            {offset: 0, color: '#2a8ad0'},                   //柱图渐变色
                            {offset: 1, color: '#3af3ce'},                   //柱图渐变色
                        ]
                    )
                  }
              }
          ]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    position relative
  .animae_jz
    position absolute
    top 10%
    left 0
</style>